<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <!-- 按钮 -->
    <div class="sale-btn">
      <div class="warp">
        <button @click="add">新增员工</button>
        <!--<button @click="posts">员工调岗</button>-->
      </div>
    </div>
    <!-- 按钮end -->
    <!--跟进列表 -->
    <div class="sale-list">
      <div class="warp">
        <div class="sale-list-li">
          <div class="sale-list-li-left">入职时间</div>
          <div class="sale-list-li-input">
            <el-date-picker style="width:90%;cursor: pointer;"
                            v-model="entry_date_start"
                            type="date"
                            placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left sale-list-li-left1">入职时间
            <div class="line"></div>
          </div>
          <div class="sale-list-li-input">
            <el-date-picker style="width:90%;cursor: pointer;"
                            v-model="entry_date_end"
                            type="date"
                            placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">职级</div>
          <div class="sale-list-li-input">
            <select v-model="job_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in zhiwu"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">区域</div>
          <div class="sale-list-li-input">
            <select @change="getMen" v-model="department_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in Quyu"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">门店</div>
          <div class="sale-list-li-input">
            <select @change="getGroup" v-model="store_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in MenD"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">小组</div>
          <div class="sale-list-li-input">
            <select v-model="group_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in Groups"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">入职渠道</div>
          <div class="sale-list-li-input">
            <select v-model="entry_channel_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in entry_channel_ids"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <button class="sale-search" @click="onstaff">查询</button>
        </div>
      </div>
    </div>
    <!-- 跟进列表 end-->
    <!-- 楼盘列表 -->
    <div class="sale-info">
      <table>
        <!-- 列表循环 -->
        <tr class="right_up">
          <!--<td>全部</td>-->
          <td>编号</td>
          <!--<td>入职时间</td>-->
          <!--<td>离职时间</td>-->
          <td>员工姓名</td>
          <td>员工电话</td>
          <td>区域</td>
          <td>部门</td>
          <td>门店</td>
          <td>职务</td>
          <td>小组</td>
          <td>入职渠道</td>
          <td>员工调岗</td>
        </tr>
        <!-- 标题 end-->
        <tr class="sale-info-title" v-for="item in AllStaff">
          <!--<td>全部</td>-->
          <td>{{item.code}}</td>
          <!--<td>{{item.entry_date}}</td>-->
          <!--<td>{{item.leave_date}}</td>-->
          <td>{{item.name}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.region}}</td>
          <td>{{item.department}}</td>
          <td>{{item.store}}</td>
          <td>{{item.job}}</td>
          <td>{{item.group}}</td>
          <td>{{item.entry_channel}}</td>
          <td class="diaogang">
            <button @click="posts(item.id)">员工调岗</button>
          </td>
        </tr>
        <!-- 标题 end-->
        <!-- 列表循环 end-->
      </table>
      <!-- 分页 -->
      <div class="page-list">
        <el-pagination @current-change="currentChange"
                       layout="prev, pager, next" :current-page="datas.current_page" :page-size="datas.per_page"
                       :total="datas.total">
        </el-pagination>
      </div>
      <!-- 分页 end-->
    </div>
    <!-- 楼盘列表 end-->
    <!-- 新增员工 -->
    <div v-show="Addshow">
      <AddModal :getstaff="getstaff" :LDmodal="opensubmit" :Quyu="Quyu" :jobs="jobs" :AddClose="add2"></AddModal>
    </div>
    <!-- 新增员工 edn-->
    <!-- 员工调岗 -->
    <div v-show="Postshow">
      <PostModal :jobs="jobs" :Refresh="currentChange" :LDmodal="opensubmit" :allitems="allitems" :Mid="Mid" :PostClose="postss"></PostModal>
    </div>
    <!-- 员工调岗 end-->
    <!--提示弹窗-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
    <!-- 尾部 -->
    <footers></footers>
    <!-- 尾部 end -->
  </div>
</template>
<script type="text/babel">
  import heads from './head';
  import footers from './footer';
  import AddModal from './add-staff-modal';
  import PostModal from './post-modal';
  import Modal from  './modal.vue'
  export default {
    name: 'StaffList',
    components: {
      heads,
      footers,
      AddModal,
      PostModal,
      Modal
    },
    data() {
      return {
        submitShow: false,
        message: '',
        pushTo: '',
        zhiwu:[],
        entry_date_start: '',
        entry_date_end: '',
        Addshow: false,
        Postshow: false,
        AllStaff: [],
        datas: [],
        jobs: [],
        Mid: 0,
        allitems: {},
        Quyu:[],//区域
        department_id:'',
        MenD:[],
        store_id:'',
        Groups:[],
        group_id:'',
        job_id:'',
        entry_channel_id:'',
        entry_channel_ids:[{id:1,title:'人事招聘'},{id:2,title:'员工推荐'},{id:3,title:'其它'}]
      }
    },
    methods: {
      opensubmit(){
        this.message = this.$store.state.messageString;
        this.submitShow = true
      },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false
      },
      //查询
      onstaff(){
        let that = this;
        that.$http.get('/index/staff',{
          params:{
            entry_date_start:that.entry_date_start,
            entry_date_end:that.entry_date_end,
            job_id:that.job_id,
            city_code:that.department_id,
            store_id:that.store_id,
            group_id:that.group_id,
            entry_channel_id:that.entry_channel_id
          }
        }).then(res=>{
          console.log(res);
          that.AllStaff = res.data.data;
          that.datas = res.data;
          console.log(that.datas)
        }).catch(err=>{
        })
      },
      //获取门店
      getMen(){
        let that = this;
        that.$http.get('/index/department',{
          params:{
            id:that.department_id
          }
        }).then(res=>{
          that.MenD = res.data
        }).catch(err=>{
          console.log(err)
        });
      },
      //获取小组
      getGroup(){
        let that = this;
        that.$http.get('/index/department',{
          params:{
            id:that.store_id
          }
        }).then(res=>{
          that.Groups = res.data
        }).catch(err=>{
          console.log(err)
        })
      },



      // 分页查询,自己封装的方法
      currentChange(val) {
        let that = this;
        that.$http.get('/index/staff', {
          params: {
            page: val,
            entry_date_start:that.entry_date_start,
            entry_date_end:that.entry_date_end,
            job_id:that.job_id,
            city_code:that.department_id,
            store_id:that.store_id,
            group_id:that.group_id,
            entry_channel_id:that.entry_channel_id
          }
        }).then(res => {
          console.log(res);
          that.AllStaff = res.data.data;
          that.datas = res.data;
        }).catch(err => {
          console.log(err)
        })
      },



      // 新增员工
      add: function () {
        let that = this;
        that.$http.post('/index/staff/save_select_item', {}).then(res => {
          that.jobs = res.data.job
        }).catch(err => {
          console.log(err)
        });
        that.Addshow = !that.Addshow
      },
      add2(){
        this.Addshow = !this.Addshow
      },
      // 员工调岗
      postss(){
        this.Postshow = !this.Postshow
      },
      posts(id) {
        this.Mid = id;
        this.$http.get('/index/staff/adjust/department_job', {
          params: {
            user_id: id
          }
        }).then(res => {
          this.allitems = res.data
        }).catch(err => {
          console.log(err)
        });
        this.$http.post('/index/staff/save_select_item', {}).then(res => {
          this.jobs = res.data.job
        }).catch(err => {
          console.log(err)
        });
        this.Postshow = !this.Postshow
      },
      getstaff(){
        let that = this;
        that.$http.get('/index/staff', {}).then(res => {
          console.log(res);
          let data = res.data;
          that.AllStaff = res.data.data;
          that.datas = data;
        }).catch(err => {
          console.log(err)
        })
      }
    },
    created() {
      let that = this;
      that.onstaff();
      // that.$http.get('/index/staff', {}).then(res => {
      //   let data = res.data;
      //   that.AllStaff = res.data.data;
      //   that.datas = data;
      // }).catch(err => {
      //   console.log(err)
      // });
      //获取区域 联级
      that.$http.get('/index/department',{
      }).then(res=>{
        that.Quyu = res.data
      }).catch(err=>{
        console.log(err)
      });
      //获取职务下拉
      that.$http.get('/index/job',{
      }).then(res=>{
        that.zhiwu = res.data
      }).catch(err=>{
        console.log(err)
      })
    }
  }
</script>

<style scoped>
  .sale-info {
    width: 100%;
    float: left;
    position: fixed;
    top: 225px;
    height: calc(100% - 254px);
    overflow-y: auto;

  }
  .sale-list-li-left1 {
    color: #f9f9f9;
    position: relative;
  }
  .sale-list-li1 {
    width: 30% !important;
  }
  .line {
    width: 40px;
    top: 50%;
    left: 70%;
    height: 1px;
    background: #333;
    position: absolute;
    left: 0;
  }
  table {
    width: 100%;
  }
  table td {
    line-height: 30px;
    height: 30px;
    border: 1px solid #d3d3d3;
  }
  .sale-list-li-left {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;
    font-weight:bold;
  }
  .page-list {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;
  }
  .sale-list-li {
    width: 100%;
    float: left;
    margin-top: 10px;
  }
  .sale-list-li-input {
    width: 70%;
    float: left;
  }
  .sale-btn {
    width: 100%;
    position: fixed;
    top: 80px;
    float: left;
    background: #f9f9f9;
    border-bottom: 1px solid #d3d3d3;
    line-height: 40px;
    height: 40px;
    z-index: 99
  }
  .sale-btn button {
    margin-right: 40px;
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #1590ed;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  .diaogang button {
    /*margin-right: 40px;*/
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #1590ed;
    color: #fff;
    border: none;
    cursor: pointer;

  }
  .sale-search {
    margin-left: 25px;
    background: #1590ed;
    color: #ffffff;
    font-size: 1.1em;
    border: none;
    height: 30px;
    line-height: 30px;
    width: 60px;
    border-radius: 5px;
  }
  .sale-list-li-inputz input {
    width: 40% !important;
    float: left;
  }
  .sale-list-li-inputz input:nth-child(2) {
    margin-left: 8%
  }
  .sale-info-title {
    background-color: #f9f9f9;
    /*  position: fixed;*/
    width: 100%;
    overflow: hidden;
  }
  .right_up{
    background-color: #1590ed;
    font-weight:bold;
    color: #fff;
  }
  tr:nth-child(n+2):hover{
    background: #f9f9f9
  }
  .sale-list-li-input input {
    width: 90%;
    float: left;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #d3d3d3;
  }
  .sale-btn {
    width: 100%;
    position: fixed;
    top: 80px;
    float: left;
    background-color: #ecedee;
    border-bottom: 1px solid #d3d3d3;
    line-height: 40px;
    height: 40px;
  }
  .sale-btn button {
    margin-right: 40px;
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #1590ed;
    color: #fff;
    border: none;
  }
  .sale-list {
    position: fixed;
    top: 120px;
    background: #f9f9f9;
    float: left;
    width: 100%;
    left: 0;
    height: 94px;
    overflow: hidden;
    border-bottom: 1px solid #a0a0a0;
  }
  .sale-list-li {
    width: 16.666666667%;
    float: left;
  }
  select{
    cursor: pointer;
  }


</style>
